<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('入学准备课')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        .lessons {
            width: 98%;
            display: flex;
            flex-direction: row;
            margin: 20px;
        }

        .lessons-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            margin: 10px;
            width: 250px;
        }

        .lessons-left-info {
            background-color: cornflowerblue;
            color: #fff;
            border-radius: 10px;
            text-align: center;
            padding: 10px 10px;
            margin-bottom: 10px;
            font-size: 12px;
            font-weight: bold;
        }

        .lessons-left-p {
            font-size: 18px;
            font-weight: bold;
        }

        .lessons-right {
            border: 1px solid #ddd;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            padding: 20px;
            position: relative;
            width: 1280px;
            /*background: rgba(0, 0, 0, 0.05);*/
        }

        .lessons-right-info {

            display: flex;
            flex-direction: row;
        }

        .lessons-right-tearcher {
            width: 30%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap
        }

        .lessons-right-item {
            font-size: 18px;
            font-weight: bold;
            padding: 20px;
        }
        .lessons-right-item-childInfo{
            font-size: 15px;
            white-space: nowrap;
            /*font-weight: bold;*/
            /*padding: 20px;*/
        }

        .specail-txt {
            font-size: 18px;
            font-weight: bold;
            color: cornflowerblue;
        }

        .lessons-btn {
            width: 120px;
            margin: 10px;
            height: 26px;
            padding: 4px;
        }

        .status-red {
            position: absolute;
            top: -50px;
            right: -50px;
            width: 0;
            height: 0;
            border: 50px solid red;
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotateZ(135deg);
        }

        .status-blue {
            position: absolute;
            top: -50px;
            right: -50px;
            width: 0;
            height: 0;
            border: 50px solid cornflowerblue;
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotateZ(135deg);
        }
        .status-yellow {
            position: absolute;
            top: -50px;
            right: -50px;
            width: 0;
            height: 0;
            border: 50px solid yellow;
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotateZ(135deg);
        }
        .status-green {
            position: absolute;
            top: -50px;
            right: -50px;
            width: 0;
            height: 0;
            border: 50px solid green;
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotateZ(135deg);
        }

        .word {
            text-align: center;
            margin: auto;
            position: absolute;
            display: inline-block;
            width: 45px;
            left: 20px;
            top: -20px;
            color: #ffffff;
            transform-origin: bottom center;
            transform: rotate(-90deg);
            font-size: 12px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-weight: bold;

        }
        .courseTips{
            padding-right: 25px;
        }
    </style>
</head>
<body class="gray-bg">

<div class="container-div">
    <div class="col-sm-12 search-collapse">
        <form id="data-form">
            <input id="teacherId" name="teacherId" th:value="*{teacherId}" hidden="true">
            <div class="select-list">
                <ul>
                    <li>
                        <label style="margin-right: 15px">上课时间: </label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input id="scheduleTime" name="scheduleTime" type="text" class="col-sm-3 control-label"
                                   placeholder="yyyy-MM-dd">
                            <i class="fa fa-chevron-right" style="position:absolute;left: 222px;top: 10px;" onclick="nextDay()"></i>
                            <label style="width: 25px"></label>
                            <label>老师姓名：</label>
                            <input id="teacherName" type="text" class="col-sm-3 control-label '+searchTeacherFlag+'"
                                   name="teacherName"/>
                            <label style="width: 25px"></label>

                            <label style="width: 25px"></label>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                        </div>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    // 权限

    // 字典
    var courseId = [[${@dict.getType('course_id')}]];
    var classType = [[${@dict.getType('class_type')}]];
    var ageGrade = [[${@dict.getType('age_grade')}]];
    var prefix = ctx + "enrol";

    $(function () {
        layui.use('laydate', function () {
            layui.laydate.render({
                elem: '#scheduleTime',
                value: new Date(),
                format: 'yyyy-MM-dd',
                type: 'date'
            });
        })
        var options = {
            url: prefix + "/list",
            queryParams: queryParams,
            modalName: "数据",
            columns: [
                {
                    field: 'id',
                    title: '编号',
                    visible: false
                },
                {
                    field: 'dayDate',
                    title: '',
                    formatter: function (value, row, index) {
                        return formatCourse(row);
                    }
                }
            ]
        };
        $.table.init(options);
    });


    function nextDay() {
        var scheduleTime = $('#scheduleTime').val();
        var temp =new Date(scheduleTime);
        temp.setDate(temp.getDate()+1);
        $('#scheduleTime').val(dateFormat(temp,'yyyy-MM-dd'))
        $.table.search();
    }
    function formatCourse(row) {
        var html = "";
        var prepareStatusText = "",courseStatus="";
        if (row.prepareStatus == 0) {
            prepareStatusText = "未备课";
        }
        if (row.prepareStatus == 1) {
            prepareStatusText = "已备课";
        }
        if (row.prepareStatus == 2) {
            prepareStatusText = "未上课";
        }
        if(row.courseStatus == 1){courseStatus="未上课";}
        if(row.courseStatus == 2){courseStatus="上课中";}
        if(row.courseStatus == 3){courseStatus="已上课";}
        if(row.courseStatus == 4){courseStatus="已过期";}
        html += "<div class=\"lessons\">\n" +
            "    <div class=\"lessons-left\">\n" +
            "      <div class=\"lessons-left-info\">\n" +
            "        <span>" + row.className + "</span><br />\n" +
            "        <span></span>\n" +
            "      </div>\n" +
            "      <p class=\"lessons-left-p\">" + row.startTime + "~" + row.endTime + "</p>\n" +
            "      <p class=\"lessons-left-p\">"+prepareStatusText+"</p>\n" +
            "    </div>\n" +
            "    <div class=\"lessons-right\">\n" +
            "      <div class=\"lessons-right-info\">\n" +
            "        <div class=\"lessons-right-tearcher\">\n" +
            "          <div class=\"lessons-right-item\">上课老师：" + row.teacherName + "</div>\n" +
            "          <div class=\"lessons-right-item\">助教老师："+row.assistantName+"</div>\n" +
            "          <div class=\"lessons-right-item\">上课教室：<span class=\"specail-txt\">"+row.roomName+"</span>\n" +
            "          </div>\n" +
            "        </div>\n" +
            "        <div class=\"lessons-right-student\">\n" +
            "          <div class=\"lessons-right-item\"> 学员信息：";

        if (row.childInfoDTOList != null && row.childInfoDTOList.length > 0) {
            for(var c in row.childInfoDTOList){
                var childObj =row.childInfoDTOList[c];
                html += '<a class="lessons-right-item-childInfo popover-show" data-placement="top" data-toggle="popover" data-html="true" ' +
                    'data-content="'+childObj.age+';'+childObj.grade+'" onclick="childInfo(\'' + childObj.childId + '\',\'' + childObj.childName + '\')">'+childObj.childName+'；</a>'
            }
        }


        html += "</div>\n";
        // if(row.courseTips !=""){
        // html +=    " <div class=\"lessons-right-item\">课程提醒："+row.courseTips+"</div>\n" ;
        html +=' <div class="lessons-right-item">';
        if(row.fileName !=""&& row.fileName !=null){
            if(row.prepareStatus ==1){
                html+='<a href="'+row.fileUrl+'" target="_blank"><u>'+row.fileName+'</u></a>';
            }else {
                html+='<span><u>'+row.fileName+'</u></span>';
            }
        }
        // if(row.newChildTips !=""){
        //     html+='<i class="courseTips fa fa-user-plus fa-lg popover-show" data-placement="top" data-toggle="popover" data-html="true" data-content="'+row.newChildTips+'" aria-hidden="true"></i>  ';
        // }
        // if(row.childAgeTips !=""){
        //     html+='<i class="courseTips fa fa-users fa-lg popover-show" data-placement="top" data-toggle="popover" data-html="true" data-content="'+row.childAgeTips+'" aria-hidden="true"></i> ';
        // }
        html+='</div>' ;
        // }
        html +=    "        </div>\n" +
            "      </div>\n" +
            "      <div class=\"lessons-right-btn\">\n";
        if(row.prepareStatus !=1 && row.courseStatus != 4){
            html += '<a class="btn btn-success btn-xs lessons-btn"  href="javascript:void(0)"  onclick="prepareCLass(\'' + row.classId + '\',\'' + row.classPlanId + '\',\'' + row.classTimes + '\')"><i class="fa fa-edit"></i>确认项目训练计划</a> ';
        }
        // if(row.prepareStatus ==1){
        //     html += '<a class="btn btn-success btn-xs lessons-btn" href="javascript:void(0)" onclick="enterScore(\'' + row.id + '\',\'' + row.scoreFlag + '\')"><i class="fa fa-edit"></i>课程记录</a> ';
        // }

        // html += '<a class="btn btn-success btn-xs lessons-btn" href="javascript:void(0)" onclick="enterScore(\'' + row.id + '\',\'' + row.scoreFlag + '\')"><i class="fa fa-edit"></i>成绩录入</a> ';
        // if (row.showCancelClass == 1 && row.scoreFlag ==0) {
        //     html += '<a class="btn btn-danger btn-xs lessons-btn" href="javascript:void(0)" onclick="cancelPrepare(\'' + row.id + '\')"><i class="fa fa-edit"></i>取消备课</a> ';
        // }

        // if (row.showNotClass == 1) {
        //     html += '<a class="btn btn-danger btn-xs lessons-btn" href="javascript:void(0)" onclick="notClass(\'' + row.id + '\')"><i class="fa fa-edit"></i>未上课</a> ';
        // }
        //  html += '<a class="btn btn-success btn-xs lessons-btn" href="javascript:void(0)" onclick="printScoreRecord(\'' + row.id + '\')"><i class="fa fa-edit"></i>打印记录表</a> ';
        //  html += '<a class="btn btn-success btn-xs lessons-btn" href="javascript:void(0)" onclick="pushHomeWork(\'' + row.id + '\')"><i class="fa fa-edit"></i>布置作业</a> ';
        html += "      </div>\n";
        //1未上课,2上课中,3已上课,4已过期
        // if (row.courseStatus == 1) {
        //     html += "      <div class=\"lessons-right-status status-blue\">\n" +
        //         "        <div class=\"word\">" + courseStatus + "</div>\n" +
        //         "      </div>\n";
        // }
        // if (row.courseStatus == 2){
        //     html += "      <div class=\"lessons-right-status status-green\">\n" +
        //         "        <div class=\"word\">" + courseStatus + "</div>\n" +
        //         "      </div>\n";
        // }
        // if(row.courseStatus == 3){
        //     html += "      <div class=\"lessons-right-status status-yellow\">\n" +
        //         "        <div class=\"word\">" + courseStatus + "</div>\n" +
        //         "      </div>\n";
        // }
        if(row.courseStatus == 4){
            html += "      <div class=\"lessons-right-status status-red\">\n" +
                "        <div class=\"word\">" + courseStatus + "</div>\n" +
                "      </div>\n";
        }


        html += "    </div>\n" +
            "  </div>";

        return html;

    }

    $(document).on('hover', '.popover-show', function (e) {
        if (e.type == 'mouseenter') {
            $('.popover-show').popover('show');
        } else {
            $('.popover-show').popover('hide');
        }
    });

    function queryParams(params) {
        var search = $.table.queryParams(params);
        var selectIndex = window.parent.document.getElementById('parentSchoolList').selectedIndex;
        if (selectIndex >= 0) {
            var centerId = window.parent.document.getElementById('parentSchoolList').options[selectIndex].value;
            search.centerId = centerId;
        }
        var scheduleTime = $('#scheduleTime').val();
        var teacherName = $('#teacherName').val();
        var teacherId = $('#teacherId').val();
        search.scheduleTime = scheduleTime;
        search.teacherName = teacherName;
        search.teacherId = teacherId;
        return search;
    }

    function prepareCLass(classId, classPlanId, classTimes) {

        if(classPlanId==null || classPlanId=="" || classPlanId=="null"){
            $.modal.alertSuccess("未到确认时间！");
            return;
        }
        $.modal.confirm('确认训练项目计划？', function () {
            $.ajax({
                url: prefix + "/savePlan?classId=" + classId+"&classTimes="+classTimes+"&classPlanId="+classPlanId,
                type: "post",
                success: function (result) {
                    $.modal.alertSuccess("确认成功");
                    $.table.refresh();
                }
            })
        });


        //判断是否能备课
        // $.ajax({
        //     url: prefix + "/checkPrepare/" + id,
        //     type: "get",
        //     success: function (result) {
        //         if (result.data.prepare == false) {
        //             $.modal.alertWarning(result.data.msg);
        //         }
        //         if (result.data.prepare == true) {
        //             if (classType == 1) {//常规班
        //                 hasCheckTrainPackage(id, ageGrade)
        //             }
        //             if (classType == 2) {//集训班
        //                 hasCheckTrainTheme(id, ageGrade)
        //             }
        //         }
        //     }
        // })
    }


    function notClass(id) {
        $.modal.confirm('确定本节课未上课？', function () {
            $.ajax({
                url: prefix + "/cancelPlan?id=" + id,
                type: "post",
                success: function (result) {
                    $.modal.alertSuccess("操作成功");
                    $.table.refresh();
                }
            })
        });

    }

    function childInfo(childId,childName) {
        var url = ctx + "business/learningReport/learningReport/" + childId+"/"+"0kecheng";
        $.modal.openTab(childName + "的测评记录", url, 1200, null, null);
    }



    function enterScore(id,scoreFlag) {
        var url = ctx + "thinking/childScoreList/" + id+"/"+scoreFlag;
        $.modal.openTab("成绩录入", url);
    }


    function cancelPrepare(id) {
        $.modal.confirm('确定取消本节课备课？', function () {
            $.ajax({
                url: prefix + "/cancelPlan?id=" + id,
                type: "post",
                success: function (result) {
                    $.modal.alertSuccess("取消成功");
                    $.table.refresh();
                }
            })
        });

    }

    function updateStatus(id, status) {
        var reqData = {
            "id": id,
            "status": status
        }
        $.ajax({
            url: prefix + "/updateStatus",
            type: "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(reqData),
            success: function (result) {
                $.table.refresh();
            }
        })

    }

    function pushHomeWork(id) {
        var url = ctx + "child/homework/dealHomeWork/" + id;
        $.modal.openTab("布置作业", url);
    }
</script>
</body>

</html>